<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>备件管理系统 - 出库记录</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      font-size: 16px;
    }

    .header {
      background-color: #f5f7fa;
      padding: 15px;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .header h2 {
      margin: 0;
      font-size: 20px;
    }

    main {
      padding: 10px;
    }

    .el-button {
      font-size: 16px;
      padding: 10px 20px;
      width: 100%;
      max-width: 200px;
    }

    .el-input,
    .el-date-editor {
      width: 100%;
    }

    .el-table {
      font-size: 14px;
    }

    /* 表格在小屏幕下允许横向滚动 */
    .table-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;
    }

    .el-pagination {
      margin-top: 15px;
    }

    /* 响应式弹窗 */
    @media (max-width: 768px) {
      .el-dialog {
        width: 95% !important;
        margin-top: 10vh !important;
      }

      .el-form-item__content {
        width: 100%;
      }
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 页面头部 -->
  <header class="header">
    <h2>出库管理</h2>
  </header>

  <!-- 主体内容 -->
  <main>
    <!-- 操作按钮与搜索 -->
    <div style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px;">
      <el-button type="info" size="medium" @click="logout" style="align-self: flex-end;">退出</el-button>
      <div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;">
        <el-button type="primary" size="medium" @click="showAddDialog = true">新增出库记录</el-button>
        <el-button type="success" size="medium" @click="showQRCodeDialog = true">二维码操作</el-button>
        <el-input v-model="searchQuery" placeholder="请输入批次号或备件ID"></el-input>
      </div>
    </div>

    <!-- 表格容器 -->
    <div class="table-wrapper">
      <el-table :data="filteredOutBoundRecordsList" border style="min-width: 600px;">
        <el-table-column prop="outboundid" label="ID" width="80"></el-table-column>
        <el-table-column prop="sparepartid" label="备件ID" width="100"></el-table-column>
        <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
        <el-table-column prop="batchNumber" label="批次号" width="120"></el-table-column>
        <el-table-column prop="date" label="日期" width="120"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="mini" type="danger" @click="deleteOutBoundRecord(scope.row.outboundid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-pagination
            layout="prev, pager, next"
            :total="computedOutBoundRecordsList.length"
            v-model:current-page="currentPage"
            :page-size="pageSize"
            style="margin-top: 20px; justify-content: center;"
    ></el-pagination>

    <!-- 新增入库弹窗 -->
    <el-dialog v-model="showAddDialog" title="新增出库记录" width="95%">
      <el-form :model="newOutBoundRecord" label-position="left" label-width="100px">
        <el-form-item label="备件ID">
          <el-input v-model.number="newOutBoundRecord.sparepartid"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model.number="newOutBoundRecord.quantity"></el-input>
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="newOutBoundRecord.batchNumber"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="newOutBoundRecord.date" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <div style="text-align: right;">
          <el-button @click="cancelAdd">取消</el-button>
          <el-button type="primary" @click="addOutBoundRecord">添加</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 二维码弹窗 -->
    <el-dialog v-model="showQRCodeDialog" title="生成二维码" width="95%">
      <div style="text-align: center;">
        <img :src="qrCodeImage" alt="二维码" style="width: 200px; height: 200px;" />
      </div>
      <template #footer>
        <div style="text-align: center;">
          <el-button type="primary" @click="generateQRCode">生成二维码</el-button>
        </div>
      </template>
    </el-dialog>
  </main>

  <!-- 底部 -->
  <footer style="text-align: center; padding: 10px; font-size: 12px; color: #666; background: #f5f5f5; margin-top: 20px;">
    &copy; 2025 备件管理系统 - 版权所有
  </footer>
</div>

<!-- 引入 Vue + Axios + Element Plus -->
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-plus"></script>

<script>
  const { createApp } = Vue;
  const apiClient = axios.create({
    //本机地址
    //baseURL: 'http://localhost:8086',
    //服务器 地址
    baseURL: 'http://8.137.85.243:8086',
    timeout: 5000
  });

  const app = createApp({
    data() {
      return {
        outBoundRecordsList: [],
        newOutBoundRecord: {
          sparepartid: null,
          quantity: null,
          batchNumber: '',
          date: null,
          userid: 1
        },
        searchQuery: '',
        showAddDialog: false,
        currentPage: 1,
        pageSize: 10,
        showQRCodeDialog: false,
        qrCodeImage: null
      };
    },
    computed: {
      computedOutBoundRecordsList() {
        return this.outBoundRecordsList
                .filter(record =>
                        record.batchNumber.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
                        record.sparepartid.toString().includes(this.searchQuery.toLowerCase())
                )
                .map((record, index) => ({
                  index: index + 1,
                  ...record
                }));
      },
      filteredOutBoundRecordsList() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.computedOutBoundRecordsList.slice(start, end);
      }
    },
    mounted() {
      this.loadOutBoundRecords();
    },
    methods: {
      async loadOutBoundRecords() {
        try {
          const res = await apiClient.get('/api/outboundrecords/listall');
          this.outBoundRecordsList = res.data;
        } catch (error) {
          alert('加载失败: ' + error.message);
        }
      },

      async addOutBoundRecord() {
        if (
                !this.newOutBoundRecord.sparepartid ||
                !this.newOutBoundRecord.quantity ||
                !this.newOutBoundRecord.batchNumber
        ) {
          alert('请填写完整信息');
          return;
        }

        try {
          await apiClient.post('/api/outboundrecords/insert', this.newOutBoundRecord);
          this.showAddDialog = false;
          this.newOutBoundRecord = {
            sparepartid: null,
            quantity: null,
            batchNumber: '',
            date: null,
            userid: 1
          };
          this.loadOutBoundRecords();
        } catch (error) {
          alert('添加失败: ' + error.message);
        }
      },

      cancelAdd() {
        this.newOutBoundRecord = {
          sparepartid: null,
          quantity: null,
          batchNumber: '',
          date: null,
          userid: 1
        };
        this.showAddDialog = false;
      },

      async deleteOutBoundRecord(id) {
        if (!confirm('确定删除？')) return;
        await apiClient.delete(`/api/outboundrecords/delete/${id}`);
        this.loadOutBoundRecords();
      },

      async generateQRCode() {
        const url = 'http://8.137.85.243:8086/contact/outbound_records.html';

        this.$notify({
          title: '提示',
          message: '正在生成二维码...',
          duration: 2000
        });

        try {
          const response = await apiClient.get('/api/qrcode/generate', {
            params: { content: url }
          });
          this.qrCodeImage = response.data;

          this.$notify({
            title: '成功',
            message: '二维码生成成功！',
            type: 'success',
            duration: 2000
          });
        } catch (error) {
          this.$notify.error({
            title: '错误',
            message: '二维码生成失败: ' + error.message,
            duration: 3000
          });
        }
      },

      logout() {
        window.location.href = '/login.html';
      }
    }
  });

  app.use(ElementPlus);
  app.mount('#app');
</script>
</body>
</html>
